<!--
 * @Author: your name
 * @Date: 2021-12-09 15:37:08
 * @LastEditTime: 2021-12-16 13:35:44
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \iccdemov2\src\views\Home\HomeMenu.vue
-->
<template>
  <div>
    <div class="home_menu">
      <a-menu v-model="current" mode="horizontal">
        <a-menu-item key="shouye" @click="shouyeShow">首页</a-menu-item>
        <a-sub-menu v-for="(item, index) in menuList" :key="index">
          <span slot="title" class="submenu-title-wrapper">
            {{ item.moduleName }}
          </span>
          <a-menu-item
            v-for="i in item.menus"
            :key="i.uniqueMenuCode"
            @click="addtab(i)"
            >{{ $t(i.uniqueMenuCode) }}</a-menu-item
          >
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="home_tabs">
      <div>
        <a-tabs
          v-model="activeKey"
          hide-add
          type="editable-card"
          @edit="onEdit"
          class="shouyeStyle"
          @change="getActionKey"
          tabPosition="bottom"
        >
          <a-tab-pane key="shouye" tab="首页">
            <img
              :src="require('../../assets/images/shouyeBg.png')"
              :style="{ height: clientHeight + 'px', width: '100%' }"
              alt
            />
          </a-tab-pane>
          <a-tab-pane
            v-for="pane in panes"
            :key="pane.key"
            :tab="$t(pane.title)"
          >
            <Iframes
              :iframeId="pane.title"
              :src="pane.url"
              :clientHeight="clientHeight"
              :btnValue="btnValue"
            ></Iframes>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import Iframes from './Iframes.vue';
export default {
  mounted() {
    VE_API.menu.getNavigation({}, `?terminal=1`).then(res => {
      this.menuList = res.data.data.value;
    })
    VE_API.menu.getMenus({}, `?terminal=1`).then(res => {
      this.btnValue = res.data.data.value;
    })
  },
  components: {
    Iframes
  },
  data() {
    const panes = [];
    return {
      current: ['shouye'],//初始化菜单首页
      activeKey: 'shouye',//初始化tab首页展示
      panes,
      newTabIndex: 0,
      menuList: [],
      clientHeight: document.documentElement.clientHeight - 180,
      btnValue: [],
      timeout: ''
    }
  },
  created() {
    window.onresize = () => {
      this.clientHeight = document.documentElement.clientHeight - 180;
    };
    window.changeCurrentTab = this.addtab;
    window.addEventListener('message', function (msg) {
      // console.log(msg.data);
    })
  },
  methods: {
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    addtab(item) {
      const panes = this.panes;
      const activeKey = `${item.uniqueMenuCode}`;
      let isFlag = this.panes.findIndex(item => item.key === activeKey);//阻止重复添加子系统
      if (isFlag < 0) {
        panes.push({
          title: `${item.uniqueMenuCode}`,
          url: `${item.menuPath}`,
          key: activeKey,
        });
        this.panes = panes;
        this.activeKey = activeKey;
      } else {
        this.activeKey = activeKey;
      }
    },
    remove(targetKey) {
      let activeKey = this.activeKey;
      let lastIndex;
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.panes.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      } else {
        activeKey = 'shouye';
      }
      this.panes = panes;
      this.activeKey = activeKey;//切换tab
      const key = [];
      key.push(activeKey);
      this.current = key;//菜单根据tab切换展示子系统
    },
    //显示首页
    shouyeShow() {
      this.activeKey = 'shouye';
    },
    //切换tab与菜单联动
    getActionKey(keyflag) {
      const key = [];
      key.push(keyflag);
      this.current = key;
    },
  },
}
</script>
<style scoped>
.home_menu {
  height: 50px;
}
.wpms-frame-style {
  width: 100%;
  /* height: 100%; */
}
/* tab首页不展示 */
/* .shouyeStyle /deep/.ant-tabs-nav > div > div:nth-child(1) {
  display: none !important;
} */
/* tab首页删除标识不展示 */
.shouyeStyle /deep/.ant-tabs-nav > div > div:nth-child(1) .ant-tabs-close-x {
  display: none !important;
}
.shouyeStyle /deep/.ant-tabs-tab-active {
  background: #3598db !important;
  color: #ffffff !important;
}
.shouyeStyle /deep/.ant-tabs-right-content{
  padding-right: 0px !important;
}
</style>